import React from "react";
import './seach.css'
class Seach extends React.Component {
    // 构造
    constructor() {
        super()//被调用父类的构造函数
        this.state = {
            isShowHistort: false,
            // 输入框的历史
            history: ["1111", "2222", "3333", "4444", "5555", "6666"],
            // 鼠标进入历史改变每一个颜色
            enterIndex: -1,
            selectIndex: -1,
        }
    }
    // 渲染
    render() {
        return (
            <div className="seach_bar_container">
                <div>
                    <input className="input_bar_container"
                        // 点击输入框显示
                        onFocus={() => {
                            this.setState({
                                isShowHistort: true
                            })
                        }}
                        // 失去焦点消失
                        onBlur={() => {
                            this.setState({
                                isShowHistort: false
                            })
                        }}
                        // 上下键
                        onKeyDown={(event) => {
                            var keyCode = event.keyCode;
                            if (keyCode === 38) {
                                this.state.selectIndex--;
                                if (this.state.selectIndex < 0) {
                                    this.state.selectIndex = this.state.history.length - 1;
                                }
                                this.setState({
                                    selectIndex: this.state.selectIndex
                                })
                                this.refs.input.value = this.state.history[this.state.selectIndex]
                            } else if (keyCode === 40) {
                                     this.state.selectIndex++;
                                     if(this.state.selectIndex>this.state.history.length-1){
                                         this.state.selectIndex=0;
                                     }
                                     this.setState({
                                        selectIndex: this.state.selectIndex
                                    })
                                    this.refs.input.value = this.state.history[this.state.selectIndex]
                            }
                        }}
                        // ref获取元素
                        ref="input" />
                    {/* 点击按钮搜索 */}
                    <button
                        className="button_bar_container"
                        onClick={() => {
                            console.log(this.refs.input);
                            //  获取输入框的值
                            var value = this.refs.input.value;
                        }}
                    >百度一下</button>
                </div>

                <div className={this.state.isShowHistort ? 'seach_wrap_container_hidder' : 'seach_wrap_container'}>
                    {/* 循环搜索历史用map map循环必须有返回值 */}
                    {
                        this.state.history.map((element, index) => {
                            return <div key={index}
                                //    触发历史搜素框改变字体颜色
                                className={this.state.enterIndex === index ? 'seach_history_hover' : 'seach_histort'}
                                onMouseEnter={() => {
                                    this.setState({
                                        enterIndex: index
                                    })
                                }}>{element}</div>
                        })
                    }
                </div>
            </div>
        )
    }
}
export default Seach;


